<template>
    <div class="xj-shop">
        <van-nav-bar
        title="门店订单"
        left-arrow
        @click-left="back()"
        />
        <!-- content -->
        <div class="tab-content">
            <ul>
                <li @click="jump('orderDetails', { ...item })" v-for="(item,index) in OrderList" :key="index">
                    <div class="goods-name">
                        <div class="left-photo">
                            <!-- <img v-lazy="publicUrl + item.filepath" width="100%" height="100%" alt=""> -->
                            <van-image
                              width="100%"
                              height="100%"
                              lazy-load
                              :src="publicUrl + item.filepath"
                            />
                        </div>
                        <div class="right-name">
                            <div>{{item.title}}</div>
                            <div>¥ {{item.total}} </div>
                        </div>
                    </div>
                    <div class="store-name">
                        <div class="store-head">
                            <div>
                                <img v-lazy="item.thumb" width="100%" height="100%" alt="">
                            </div>
                        </div>
                        <div class="shop-name">
                            <div>{{item.username}}</div>
                        </div>
                        <div class="store-go"><van-icon size="0.3rem" name="arrow" /></div>

                    </div>
                    <div class="order-time">
                        <div>下单时间：{{item.create_time}}</div>
                    </div>
                </li>
            </ul>

        </div>
    </div>
</template>

<script>
import { postStoreOrder } from '../../api/ajax';
export default {
    data:function(){
        return{
           OrderList:[],
        }
    },

    mounted(){
       this.storeOrderList();
    },
    methods:{
        async storeOrderList(){
            const result = await postStoreOrder();
            if(!!result){
                this.OrderList = result;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
    .xj-shop{
        height: 100%;
        width: 100%;
        background-color: #f4f4f4;
         overflow:scroll;
        position: fixed;
        overflow-y: scroll;
        .tab-content{
            // height: 100%;
            // background-color: red;
            li{
                width: 95%;
                background-color: #fff;
                margin: 0 auto;
                margin-top: px2rem(15);
                border-radius: px2rem(15);
                .goods-name{
                    display: flex;
                    height: px2rem(110);
                    border-bottom: px2rem(1) #f4f4f4 solid;
                    .left-photo{
                        width: px2rem(89);
                        height: px2rem(89);
                        border-radius: px2rem(10);
                        // background-color: #272822;
                        margin-top:px2rem(11);
                        margin-left:px2rem(11);
                        img {
                            height: 100%;
                            width: 100%;
                        }
                    }
                    .right-name{
                        position: relative;
                        font-size: px2rem(14);
                        font-weight: bold;
                        padding-left: px2rem(10);
                        padding-top: px2rem(10);
                        width: 64%;

                        div:last-child{
                            font-size: px2rem(16);
                            color: #f79846;
                            position: absolute;
                            left: px2rem(10);
                            bottom: px2rem(10);
                            .be-price{
                                font-size: px2rem(12);
                                font-weight: normal;
                                color: #b9b9b9;

                            }
                        }
                    }
                }
                .store-name{
                    // overflow: hidden;
                    // display: flex;
                    height: px2rem(35);
                    // background-color: #aaa;
                    padding-top: px2rem(11);
                    padding-left: px2rem(11);
                    .store-head{
                        float: left;
                        div{
                            margin-top: px2rem(2);
                            margin-right: px2rem(7);
                            //  margin: 0 auto;
                            width:px2rem(25);
                            height:px2rem(25);
                            border-radius: 50%;
                            overflow: hidden;
                        }
                    }
                    .shop-name{
                        float: left;
                        width: 59%;
                        color:#a3a3a3;
                        padding-top:px2rem(2);
                        padding-left:px2rem(3);
                        font-size: px2rem(14);
                        div{
                            margin-bottom: px2rem(5);
                        }

                    }
                    .store-go{
                        float: right;
                        color:#a3a3a3;
                        padding-top:px2rem(3);
                        padding-right:px2rem(10);
                    }
                }
                .order-time{
                    border-top: px2rem(0.1) #f4f4f4 solid;
                    height: px2rem(34);
                    line-height: px2rem(30);
                    color: #7d7d7d;
                    background: #fff;
                    // text-align: right;
                    div{
                        float: right;
                        margin-right: px2rem(10);
                    }
                }
            }
        }
    }

</style>

